<script lang="ts" setup>
import type {
  AppMessageType,
  BaseAppDispatchMessage,
  BaseMessage,
} from '@jari-ace/app-bolts';

import { computed, reactive, ref } from 'vue';

import { JsonViewer, Page } from '@vben/common-ui';

import { useBridge } from '@jari-ace/element-plus-component';
import { ElButton, ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';

const {
  onMessage,
  sendMessage,
  getBaseAppData,
  sendGlobalMessage,
  onGlobalMessage,
} = useBridge(import.meta.env.VITE_APP_NAME);

const rules = {};

const formData = reactive<{
  appName: string;
  message: string;
}>({
  appName: '',
  message: '',
});

const baseData = ref<BaseAppDispatchMessage | null>(null);

const receivedMessage = ref<AppMessageType[]>([]);


const globalReceivedMessage = ref<BaseMessage<any>[]>([]);

const getData = () => {

  const data = getBaseAppData();
  console.log('主动获取基座应用消息1：', data);
  baseData.value = data;
  console.log('主动获取基座应用消息2：', baseData.value);
};

// 注册多个监听
onGlobalMessage((msg) => {
  console.log('全局监听：', msg);
  if (msg.payload?.type === 'demo') {
    globalReceivedMessage.value.push(msg);
  }
});

onMessage((msg) => {
  console.log('子应用接收到基座的信息', msg);
  if (msg.payload.type === 'demo') {
    receivedMessage.value.push(msg);
  }
});

const sendTheme = (color: '#FFFFFF' | 'green' | 'red') => {
  sendMessage({
    type: 'system-setting',
    theme: {
      backgroundColor: color,
    },
  });
};

const send = () => {
  sendMessage({
    type: 'demo',
    content: formData.message,
  });
};

const sendToAll = () => {
  sendGlobalMessage({
    type: 'demo',
    content: formData.message,
  });
};
</script>

<template>
  <Page description="" title="应用之间的通讯演示">
    <div class="columns-2">
      <ElCard>
        <div class="brodge-demo__card border-gray-300 bg-gray-100">
          <p class="mb-3 font-bold">向基座应用发送消息:</p>
          <ElForm
            size="default"
            :model="formData"
            label-width="80px"
            :rules="rules"
          >
            <ElFormItem label="消息内容" prop="message">
              <ElInput
                v-model="formData.message"
                type="textarea"
                :rows="3"
                placeholder="在此编辑消息"
              />
            </ElFormItem>
            <ElFormItem>
              <ElButton type="primary" @click="send">
                向基座应用发送消息
              </ElButton>
              <ElButton type="primary" @click="sendToAll">
                向所有应用发送消息
              </ElButton>
            </ElFormItem>
          </ElForm>
        </div>
        <div class="brodge-demo__card border-gray-300 bg-gray-100">
          <p class="mb-3 font-bold">主动获取基座应用分发的数据:</p>
          <ElButton class="mb-2" @click="getData">获取</ElButton>
          <JsonViewer
            v-if="baseData !== null"
            :value="baseData"
            copyable
            preview-mode
            :show-array-index="false"
          />
        </div>
        <div class="brodge-demo__card border-gray-300 bg-gray-100">
          <p class="mb-3 font-bold">修改基座背景色:</p>
          <ElButton @click="sendTheme('red')">背景色为红色</ElButton>
          <ElButton @click="sendTheme('green')">背景色为绿色</ElButton>
          <ElButton @click="sendTheme('#FFFFFF')">背景色为白色</ElButton>
        </div>
      </ElCard>
      <ElCard>
        <div class="brodge-demo__card border-gray-300 bg-gray-100">
          <p class="mb-3 font-bold">接收到基座应用的消息:</p>
          <div class="app-message-container h-64 overflow-auto">
            <div
              v-for="msg in receivedMessage"
              :key="msg.timestamp"
              class="message-info"
            >
              <div class="app-message__header">
                <div class="app-message__header__time">
                  时间：{{ new Date(msg.timestamp).toLocaleString() }}
                </div>
                <div class="app-message__header__sender">
                  发送者：{{ msg.sender }}
                </div>
                <div class="app-message__header__type">
                  消息内容：{{ JSON.stringify(msg.payload) }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="brodge-demo__card border-gray-300 bg-gray-100">
          <p class="mb-3 font-bold">接收到全局的消息:</p>
          <div class="app-message-container h-64 overflow-y-scroll">
            <div
              v-for="msg in globalReceivedMessage"
              :key="msg.timestamp"
              class="message-info"
            >
              <div class="app-message__header">
                <div class="app-message__header__time">
                  时间：{{ new Date(msg.timestamp).toLocaleString() }}
                </div>
                <div class="app-message__header__sender">
                  发送者：{{ msg.sender }}
                </div>
                <div class="app-message__header__type">
                  消息内容：{{ JSON.stringify(msg.payload) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </ElCard>
    </div>
  </Page>
</template>

<style scoped>
.brodge-demo__card {
  /* border: 1px solid rgba(0,0,0,0.1); */
  margin-bottom: 20px;
  /* background-color: #f2f2f3; */
  padding: 10px 20px;
  border-radius: 4px;
}
.app-message-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
</style>
